<template>
  <div>
    <div class="shopping-cart">
      <h1>Shopping Cart</h1>

      <!-- 商品列表 -->
      <div class="product-list">
        <!-- 把购物车封装成组件 -->
        <!-- <ShopItem1 v-for="shop in shops" :key="shop.id" :shop></ShopItem1> -->
         <!-- 等同于如下插槽 -->
          <template v-for="shop in shops" :key="shop.id">
            <slot :shop>
              <!-- 1. 把购物车封装成插槽，购物车也可以自定义，增加灵活度 -->
              <ShopItem1 :shop></ShopItem1>
            </slot>
          </template>
      </div>

      <!-- 购物车总结 -->
      <div class="cart-summary">
        <h3>Cart Summary</h3>
        <p>
          Total Items: <span>{{ shops.length }}</span>
        </p>
        <p>
          Total Price: <span>${{ sumPrice }}</span>
        </p>
        <button class="checkout-btn" @click="Checkout">Checkout</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import ShopItem1 from './ShopItem1.vue';
import { type IShopInfo } from '@/types/shop';

// const shops = ref<IShopInfo[]>([
//   {
//     id: '1',
//     name: 'Apple',
//     count: 1,
//     price: 100,
//     picture:
//       'https://ts2.cn.mm.bing.net/th?id=OIP-C.-Y9W58cVwHMaH021cnmzGgHaIY&w=234&h=266&c=8&rs=1&qlt=90&o=6&cb=13&dpr=1.6&pid=3.1&rm=2',
//     stock: 10
//   }
// ])

// 2. 将默认商品信息改为传值，增加灵活性
const { shops } = defineProps<{
  shops: IShopInfo[]
}>()

// 3. 定义的属性props类型只读，重新定义赋值后课修改
const myshops = ref<IShopInfo[]>(shops)

/**
 * 添加商品
 */
const addShop = (shop:IShopInfo)=>{
  myshops.value.push(shop)
  // myshops.value.push({
  //   id: '4',
  //   name: 'Bread',
  //   count: 1,
  //   price: 100,
  //   picture:
  //     'https://ts3.cn.mm.bing.net/th?id=OIP-C.TZXl9sWf-mYfTBBt7kd-PQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&cb=13&dpr=1.6&pid=3.1&rm=2',
  //   stock: 10
  // })
}

/**
 * 编辑某个商品指定属性的值（ts类型约束）
 */
const editShop = <K extends keyof IShopInfo>(index:number,property:K,val:IShopInfo[K])=>{
  myshops.value[index][property] = val
}

/**
 * 计算总额
 */
const sumPrice = computed(()=>{
  return shops.reduce((pre,cur)=>{
    return pre + cur.price * cur.count
  },0)
})

/**
 * 结账金额提醒
 */
const Checkout = ()=>{
  alert('Check out successfully！Total price is :$' + sumPrice.value);
  myshops.value.forEach(shop=>shop.count = 0)
}

defineExpose({
  addShop,
  editShop
})
</script>

<style scoped>
/* 主体购物车样式 */
.shopping-cart {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
}

/* 商品列表 */
.product-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}



/* 购物车总结 */
.cart-summary {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #ccc;
  text-align: right;
}

.cart-summary h3 {
  margin-bottom: 10px;
}

.cart-summary p {
  font-size: 1.2em;
  margin: 5px 0;
}

.checkout-btn {
  padding: 10px 20px;
  background-color: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1em;
}

.checkout-btn:hover {
  background-color: #0b7dda;
}
</style>
